<template>
	<div :class="[
      'message-input-toolbar',
      'message-input-toolbar-h5',
      'message-input-toolbar-uni',
    ]">
		<div v-if="props.displayType === 'emojiPicker'">
			<EmojiPickerDialog />
		</div>
		<div v-else>
			<swiper :class="['message-input-toolbar-swiper']" :indicator-dots="isSwiperIndicatorDotsEnable"
				:autoplay="false" :circular="false">
				<swiper-item :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]">
					<ImageUpload imageSourceType="camera" />
					<ImageUpload imageSourceType="album" />
					<VideoUpload videoSourceType="album" />
					<VideoUpload videoSourceType="camera" />
					<chatgift :userId="userID" v-if="userID!=''||!isGroup"></chatgift>
					<!-- 位置 -->
					<view
						style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;"
						@click="chooseAddress">
						<view class="address">
							<image src="@/static/images/chat_address.png" mode="aspectFill"
								style="width: 56rpx;height: 56rpx;"></image>
						</view>
						<view class="title">位置</view>
					</view>

					<!--          <template v-if="currentExtensionList[0]">
            <div
              v-for="(extension, index) in currentExtensionList.slice(0, 4)"
              :key="index"
            >
              <ToolbarItemContainer
                v-if="extension"
                :iconFile="genExtensionIcon(extension)"
                :title="genExtensionText(extension)"
                iconWidth="25px"
                iconHeight="25px"
                :needDialog="false"
                @onIconClick="onExtensionClick(extension)"
              />
            </div>
          </template> -->
					<!--          <Evaluate
            v-if="currentExtensionList.length < 4"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          /> -->
					<!--          <Words
            v-if="currentExtensionList.length < 3"
            @onDialogPopupShowOrHide="handleSwiperDotShow"
          /> -->
				</swiper-item>
				<swiper-item v-if="currentExtensionList[2] && currentExtensionList.length >= 3" :class="[
            'message-input-toolbar-list',
            'message-input-toolbar-h5-list',
            'message-input-toolbar-uni-list',
          ]">
					<div v-for="(extension, index) in currentExtensionList.slice(4)" :key="index">
						<ToolbarItemContainer v-if="extension" :iconFile="genExtensionIcon(extension)"
							:title="genExtensionText(extension)" iconWidth="25px" iconHeight="25px" :needDialog="false"
							@onIconClick="onExtensionClick(extension)" />
					</div>
					<Evaluate v-if="currentExtensionList.length >= 4" @onDialogPopupShowOrHide="handleSwiperDotShow" />
					<Words v-if="currentExtensionList.length >= 3" @onDialogPopupShowOrHide="handleSwiperDotShow" />
				</swiper-item>
			</swiper>
		</div>
		<UserSelector ref="userSelectorRef" :type="selectorShowType" :currentConversation="currentConversation"
			:isGroup="isGroup" @submit="onUserSelectorSubmit" @cancel="onUserSelectorCancel" />
	</div>
</template>
<script setup lang="ts">
	import { ref, onUnmounted, onMounted, inject } from '../../../adapter-vue';
	import TUIChatEngine, {
		IConversationModel,
		TUIStore,
		StoreName,
		TUIChatService
	} from '@tencentcloud/chat-uikit-engine';
	import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
	import ImageUpload from './image-upload/index.vue';
	import VideoUpload from './video-upload/index.vue';
	import Evaluate from './evaluate/index.vue';
	import Words from './words/index.vue';
	import ToolbarItemContainer from './toolbar-item-container/index.vue';
	import EmojiPickerDialog from './emoji-picker/emoji-picker-dialog.vue';
	import UserSelector from './user-selector/index.vue';
	import TUIChatConfig from '../config';
	import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
	import { ToolbarDisplayType } from '../../../interface';
	import TencentCloudChat from "@tencentcloud/chat";
	import { isEnabledMessageReadReceiptGlobal } from '../utils/utils';
	import chatgift from '@/components/chatgift.vue'
	const chat2 = inject('$chat')
	const userID = ref('')
	const groupID = ref('')
	interface IProps {
		displayType : ToolbarDisplayType;
	}

	const props = withDefaults(defineProps<IProps>(), {
	});

	const currentConversation = ref<IConversationModel>();
	const isGroup = ref<boolean>(false);
	const selectorShowType = ref<string>('');
	const userSelectorRef = ref();
	const currentUserSelectorExtension = ref<ExtensionInfo | null>();
	const currentExtensionList = ref<ExtensionInfo[]>([]);
	const isSwiperIndicatorDotsEnable = ref<boolean>(false);

	const getExtensionList = (conversationID : string) => {
		if (!conversationID) {
			return;
		}
		const chatType = TUIChatConfig.getChatType();
		const params : Record<string, boolean | string> = { chatType };
		// Backward compatibility: When callkit does not have chatType judgment, use filterVoice and filterVideo to filter
		if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
			params.filterVoice = true;
			params.filterVideo = true;
			enableSampleTaskStatus('customerService');
		}
		// uni-app build ios app has null in last index need to filter
		currentExtensionList.value = [
			...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
		].filter(extension => extension);
	};
	const sendMessage = (data : any) => {
		const options = {
			to: isGroup.value?groupID.value:userID.value,
			conversationType: isGroup.value?TencentCloudChat.TYPES.CONV_GROUP:TencentCloudChat.TYPES.CONV_C2C,
			// 消息优先级，用于群聊
			// priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
			payload: {
				description: data.name,
				longitude: data.longitude, // 经度
				latitude: data.latitude // 纬度
			},
			needReadReceipt: isEnabledMessageReadReceiptGlobal(),
		}
		TUIChatService.sendLocationMessage(options);
	};
	const chooseAddress = () => {
		uni.chooseLocation({
			success: (res) => {
				sendMessage(res)
			}
		})
	}
	const onCurrentConversationUpdate = (conversation : IConversationModel) => {
		
		if (conversation && conversation.userProfile) {
			
			userID.value = conversation.userProfile.userID
		}
		if(conversation && conversation.groupProfile){
			groupID.value = conversation.groupProfile.groupID
		}
		if (conversation?.conversationID && conversation.conversationID !== currentConversation.value?.conversationID) {
			getExtensionList(conversation.conversationID);
			if (currentExtensionList.value.length > 2) {
				isSwiperIndicatorDotsEnable.value = true;
			}
		}
		currentConversation.value = conversation;
		isGroup.value = currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
	};

	onMounted(() => {
		TUIStore.watch(StoreName.CONV, {
			currentConversation: onCurrentConversationUpdate,
		});
	});

	onUnmounted(() => {
		TUIStore.unwatch(StoreName.CONV, {
			currentConversation: onCurrentConversationUpdate,
		});
	});

	// handle extensions onclick
	const onExtensionClick = (extension : ExtensionInfo) => {
		// uniapp vue2 build wx lose listener proto
		const extensionModel = currentExtensionList.value.find(
			targetExtension => targetExtension?.data?.name === extension?.data?.name,
		);
		switch (extensionModel?.data?.name) {
			case 'voiceCall':
				onCallExtensionClicked(extensionModel, 1);
				break;
			case 'videoCall':
				onCallExtensionClicked(extensionModel, 2);
				break;
			case 'search':
				extensionModel?.listener?.onClicked?.();
				break;
			default:
				break;
		}
	};

	const genOfflinePushInfo = () => {
		// doc: https://cloud.tencent.com/document/product/269/105713
		return {
			title: 'call',
			description: 'you have a call',
			androidSound: 'private_ring',
			iOSSound: '01.caf',
		};
	};

	const onCallExtensionClicked = (extension : ExtensionInfo, callType : number) => {
		selectorShowType.value = extension?.data?.name;
		if (currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_C2C) {
			extension?.listener?.onClicked?.({
				userIDList: [currentConversation?.value?.conversationID?.slice(3)],
				type: callType,
				callParams: {
					offlinePushInfo: genOfflinePushInfo(),
				},
			});
		} else if (isGroup.value) {
			currentUserSelectorExtension.value = extension;
			userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
		}
	};

	const genExtensionIcon = (extension : any) => {
		return extension?.icon;
	};
	const genExtensionText = (extension : any) => {
		return extension?.text;
	};

	const onUserSelectorSubmit = (selectedInfo : any) => {
		currentUserSelectorExtension.value?.listener?.onClicked?.({
			...selectedInfo,
			callParams: {
				offlinePushInfo: genOfflinePushInfo(),
			},
		});
		currentUserSelectorExtension.value = null;
	};

	const onUserSelectorCancel = () => {
		currentUserSelectorExtension.value = null;
	};

	const handleSwiperDotShow = (showStatus : boolean) => {
		isSwiperIndicatorDotsEnable.value
			= currentExtensionList.value.length > 2 ? !showStatus : false;
	};
</script>
<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared',
		},
	};
</script>
<style lang="scss">
	@import '../../../assets/styles/common';
	@import './style/uni';

	.address {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 120rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}

	.title {
		padding-top: 5rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F959D;
	}
</style>